<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>布局练习</title>
</head>
<style>
    body {
        margin: 0px;
        padding: 0px;
    }

    .testDiv1 {
        width: 500px;
        height: 500px;
    }

    #testDiv2 {
        width: 100px;
        height: 50px;
        background-color: yellow;
    }

    #testDiv3 {
        width: 100px;
        height: 100px;
        background-color: pink;
    }

    .childDiv1 {
        margin-left: 10px;
        width: 100px;
        height: 50px;
        background-color: #90ee90;
    }

    .childDiv2 {
        margin-left: 20px;
        margin-top: 10px;
        width: 200px;
        height: 100px;
        background-color: #ffb6c1;
    }

    #outDiv {
        width: 100%;
        height: 400px;
        background-color: #e6e6fa;
        display: flex;
    }

    /* 媒体查询 */
    @media screen and (max-width:600px) {
        #outDiv {
            flex-wrap: wrap;
        }
    }

    /* 定义骰子一的小圆点 */
    .circle {
        /* 声明flex 用于显示 */
        flex: 1;
        max-width: 30%;
        max-height: 30%;
        border-radius: 50%;
        aspect-ratio: 1/1;
        background-color: black
    }

    /* 定义左边的小圆点 */
    .leftCircle {
        /* 声明flex 用于显示 */
        flex: 1;
        max-width: 100%;
        max-height: 30%;
        border-radius: 50%;
        aspect-ratio: 1/1;
        background-color: black
    }

    /* 定义中间的小圆点 */
    .rightCircle {
        /* 声明flex 用于显示 */
        flex: 1;
        max-width: 100%;
        max-height: 30%;
        border-radius: 50%;
        /* 确保宽高比为1：1规定为圆形 */
        aspect-ratio: 1/1;
        background-color: black
    }

    /* 定义右边的小圆点 */
    .centerCircle {
        flex: 1;
        max-width: 100%;
        max-height: 30%;
        border-radius: 50%;
        aspect-ratio: 1/1;
        background-color: black
    }

    /* 定义最外面的div */
    .borderSty {
        width: 100px;
        height: 100px;
        border: 2px solid red;
        background-color: white;
        margin: 10px;
        overflow: hidden;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    /* 定义左边的div */
    .authorDivLeft {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }

    /* 定义中间div */
    .authorDivRight {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }

    /* 定义右边的div */
    .authorDivCenter {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 50%;
        height: 100%;
        overflow: hidden;
    }
</style>
<!-- 
flex-grow 定义元素之后可以根据窗口大小自动分配宽度
flex-wrap 可以使元素自动换行 wrap:表示同方向的换行 wrap-reverse:表示反方向的换行 简称就是倒过来
媒体查询有以下两种:
1.@media screen (用于屏幕样式) and max-width(){} : max-width() -- 表示屏幕宽度小于多少时执行下面样式
2.@media print (用于打印样式)
-->

<body>
    <!-- 第一题 -->
    <!-- <div style="display:flex">
        <div style="background-color: red;flex-grow: 1;" class="testDiv1"></div>
        <div style="background-color: green;flex-grow: 2;" class="testDiv1"></div>
        <div style="background-color: blue;flex-grow: 3;" class="testDiv1"></div>
    </div> -->
    <!-- 第二题 -->
    <!-- <div style="width: 300px; height: 200px;background-color: gray;display: flex;align-items: center;">
        <div id="testDiv2"></div>
    </div> -->
    <!-- 第三题 -->
    <!-- <div style="width: 300px;height: 300px;background-color:#add8e6;display: flex;justify-content: center;align-items: center;">
        <div id="testDiv3"></div>
    </div> -->
    <!-- 第四题 -->
    <!-- <div style="width: 400px;height: 300px; background-color: #ffffe0;display: flex;flex-wrap: wrap;">
        <div class="childDiv1"></div>
        <div class="childDiv1"></div>
        <div class="childDiv1"></div>
        <div class="childDiv1"></div>
        <div class="childDiv1"></div>
        <div class="childDiv1"></div>
    </div> -->
    <!-- 第五题 -->
    <!-- <div id="outDiv">
        <div class="childDiv2"></div>
        <div class="childDiv2"></div>
        <div class="childDiv2"></div>
        <div class="childDiv2"></div>
    </div> -->
    <!-- 第六题 -->
    <!-- <div
        style="width: 100%; height: 600px; background-color: #d3d3d3;display: flex;  flex-direction: column;align-items: center;">
        <div style="width: 200px;height: 200px;background-color: #add8e6"></div>
        <div style="width: 300px; height: 100px; background-color: #90ee90; margin: 10px;"></div>
        <div style="width: 150px;height: 150px;background-color: #ffffe0;margin: 10px;"></div>
        <div style="width: 250px;height: 120px;background-color: #ffb6c1;margin: 10px;"></div>
        <div style="width: 180px;height: 180px; background-color: #e6e6fa;"></div>
    </div> -->
    第七题
    <div style="width: 100%;height: 300px;background-color: gray; display: flex; align-items: center;flex-wrap: wrap;">
        <!-- 骰子1 -->
        <div style="align-items: center;" class="borderSty">
            <div class="circle"></div>
        </div>
        <!-- 骰子2 -->
        <div style="flex-direction: column" class="borderSty">
            <div class="circle" "></div>
            <div class=" circle"></div>
        </div>
        <!-- 骰子3 -->
        <div class="borderSty" style="flex-direction: column">
            <div class="circle" style="transform: translateX(-100%);"></div>
            <div class="circle"></div>
            <div class="circle" style="transform: translateX(100%);"></div>
        </div>
        <!-- 骰子4 -->
        <div class="borderSty" style="display: flex;justify-content: center;align-items: center;">
            <div class="authorDivLeft">
                <div class="leftCircle"></div>
                <div class="leftCircle"></div>
            </div>
            <div class="authorDivRight">
                <div class="rightCircle"></div>
                <div class="rightCircle"></div>
            </div>
        </div>
        <!-- 骰子5 -->
        <div class="borderSty">
            <div class="authorDivLeft" style="justify-content:space-between;">
                <div class="leftCircle"></div>
                <div class="leftCircle"></div>
            </div>
            <div class="authorDivCenter">
                <div class="centerCircle"></div>
            </div>
            <div class="authorDivRight" style="justify-content:space-between;">
                <div class="rightCircle"></div>
                <div class="rightCircle"></div>
            </div>
        </div>
        <!-- 骰子6 -->
        <div class="borderSty">
            <div class="authorDivLeft">
                <div class="leftCircle"></div>
                <div class="leftCircle"></div>
                <div class="leftCircle"></div>
            </div>
            <div class="authorDivRight">
                <div class="rightCircle"></div>
                <div class="rightCircle"></div>
                <div class="rightCircle"></div>
            </div>
        </div>
        <!-- 骰子7 -->
        <div class="borderSty">
            <div class="authorDivLeft" style="justify-content: space-between;">
                <div class=" leftCircle"></div>
                <div class="leftCircle"></div>
            </div>
            <div class="authorDivCenter" style="justify-content: space-between;">
                <div class=" centerCircle"></div>
                <div class="centerCircle"></div>
                <div class="centerCircle"></div>
            </div>
            <div class="authorDivRight" style="justify-content: space-between;">
                <div class="rightCircle"></div>
                <div class="rightCircle"></div>
            </div>
        </div>
        <!-- 骰子8 -->
        <div class="borderSty">
            <div class="authorDivLeft" style="justify-content: space-between;">
                <div class="leftCircle"></div>
                <div class="leftCircle"></div>
                <div class="leftCircle"></div>
            </div>
            <div class="authorDivCenter" style="justify-content: space-between;">
                <div class="centerCircle"></div>
                <div class="centerCircle"></div>
            </div>
            <div class="authorDivRight" style="justify-content: space-between;">
                <div class="rightCircle"></div>
                <div class="rightCircle"></div>
                <div class="rightCircle"></div>
            </div>
        </div>
        <!-- 骰子9 -->
        <div class="borderSty">
            <div class="authorDivLeft">
                <div class="leftCircle"></div>
                <div class="leftCircle"></div>
                <div class="leftCircle"></div>
            </div>
            <div class="authorDivCenter" style="justify-content: space-evenly;">
                <div class="centerCircle"></div>
                <div class="centerCircle"></div>
                <div class="centerCircle"></div>
            </div>
            <div class="authorDivRight">
                <div class="rightCircle"></div>
                <div class="rightCircle"></div>
                <div class="rightCircle"></div>
            </div>
        </div>
    </div>
</body>

</html>